<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
	</head>

	<body>
		<button id="btn">换一换</button>

		<hr />

		<div id="list"></div>

		<script>
			var page = 1;
			document.querySelector("#btn").addEventListener('click', function() {
				page++;
				document.querySelector("#list").innerHTML = ""
				loadXMLDoc();
			})

			function loadXMLDoc() {
				var xmlhttp;
				if(window.XMLHttpRequest) {
					xmlhttp = new XMLHttpRequest();
				} else {
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
				}
				xmlhttp.onreadystatechange = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						var json = xmlhttp.responseText;
						json = JSON.parse(json)
						for(let i = 0; i < json.shop.length; i++) {
							var img = document.createElement('img');
							img.src = json.shop[i].pic;
							var h3 = document.createElement('h3');
							h3.innerHTML = json.shop[i].title;
							var p = document.createElement('p');
							p.innerHTML = json.shop[i].price
							var div = document.createElement('div');
							div.appendChild(img)
							div.appendChild(h3)
							div.appendChild(p)

							console.log(div);

							document.querySelector("#list").appendChild(div)
						}
					}
				}
				xmlhttp.open("GET", page + ".json", true);
				xmlhttp.send();
			}
			loadXMLDoc();
		</script>
	</body>

</html>